 

import { defineComponent, onMounted, onUnmounted, toRefs, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  NButton,
  NDataTable,
  NPagination,
  NPopconfirm,
  NTooltip,
  NSpace
} from 'naive-ui'
import { useTable } from './use-table'
import Card from '@/components/card'
import ProcessInstanceCondition from './components/process-instance-condition'
import ModDescModal from './components/mod-desc-modal'
import ModNameModal from './components/mod-name-modal'
import ModProBelongModal from './components/mod-pro-belong-modal'

import type { MasterSearch } from './types'


export default defineComponent({
  name: 'WorkerListTab',
  setup() {
    let setIntervalP: number
    const { variables, createColumns, getTableData } = useTable()

    const requestData = () => {
      getTableData()
    }
   
    // 查询
    const handleSearch = (params: MasterSearch) => {
      variables.searchVal = params.searchVal
      variables.host = params.host
      variables.state = params.state
      variables.page = 1
      requestData()
    }

    const handleChangePageSize = () => {
      variables.page = 1
      requestData()
    }

    onMounted(() => {
      createColumns(variables)
      requestData()

      // Update timing list data
      setIntervalP = setInterval(() => {
        requestData()
      }, 9000)
    })

    watch(useI18n().locale, () => {
      createColumns(variables)
    })

    onUnmounted(() => {
      clearInterval(setIntervalP)
    })

    const handleShowChange = (val:any) => {
         variables.isShowDec = val
    }
    const handleShowNameChange = (val:any) => {
      variables.isShowName = val
    }
    const handleShowProBeglongChange = (val:any) => {
      variables.isShowProBeglong = val
    }
    const onUpdatedList = () =>{
      requestData()
    }
    return {
      requestData,
      handleSearch,
      handleChangePageSize,
      // handleBatchDelete,
      ...toRefs(variables),
      handleShowChange,
      handleShowNameChange,
      handleShowProBeglongChange,
      onUpdatedList
    }
  },
  render() {
    const { t } = useI18n()
    const { loadingRef } = this

    console.log('xx',this.curDec)

    return (
      <>
      <NSpace vertical>
        <Card>
          <ProcessInstanceCondition onHandleSearch={this.handleSearch} />
        </Card>
        <Card >
          <NSpace vertical>
            <NDataTable
              loading={loadingRef}
              rowKey={(row) => row.id}
              columns={this.columns}
              data={this.tableData}
              striped
              size={'small'}
              scrollX={this.tableWidth}
              v-model:checked-row-keys={this.checkedRowKeys}
              row-class-name='items-workflow-instances'
            />
            <NSpace justify='center'>
              <NPagination
                v-model:page={this.page}
                v-model:page-size={this.limit}
                page-count={this.totalPage}
                show-size-picker
                page-sizes={[10, 30, 50]}
                show-quick-jumper
                onUpdatePage={this.requestData}
                onUpdatePageSize={this.handleChangePageSize}
              />
            </NSpace>
          </NSpace>
        </Card>
      </NSpace>
      <ModDescModal
         showModal={this.isShowDec}
         onModalShowChange={this.handleShowChange}
         onRefreshList={this.onUpdatedList}
         workerId={this.curWorkerId}
         desc={this.curDec}
       ></ModDescModal>
      <ModNameModal
         showModal={this.isShowName}
         onModalShowChange={this.handleShowNameChange}
         onRefreshList={this.onUpdatedList}
         workerId={this.curWorkerId}
         name={this.curNodeName}
       ></ModNameModal>
      <ModProBelongModal
         showModal={this.isShowProBeglong}
         onModalShowChange={this.handleShowProBeglongChange}
         onRefreshList={this.onUpdatedList}
         workerId={this.curWorkerId}
         name={this.curNodeName}
       ></ModProBelongModal>
      </>
    )
  }
})
